<template>
      <footer>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          @click="goShoppingCart"
        />
        <van-goods-action-icon :icon="icon" :text="text" @click="shouCang" color="red" />
        <van-goods-action-button
          type="danger"
          text="加入购物车"
          @click="onClickButton"
        />
      </van-goods-action>
    </footer>
</template>

<script>
import { Toast } from "vant";
export default {
  name: 'jiao',
  data() {
    return {
      icon: "star-o",
      text:"收藏"
    }
  },
  created() {
     this.token=sessionStorage.getItem("token") 
    this.userid = sessionStorage.getItem("userid") 
    this.proid = this.$route.params.goodsid;
    },
  methods: {
    onClickIcon() {
      Toast("点击图标");
    },
    onClickButton() {
      if (sessionStorage.getItem("token")) {
        this.$service({
        method: "post",
        url: "api/cart/add",
        headers:{ token: this.token},
        data: `userid=${this.userid}&proid=${this.proid}`,
        }).then((res) => {
        console.log('res.data',res.data);
        
        if (res.data.code == 200) { 
          Toast("商品加入成功！");
        }
      
      });
      } else {
        this.$router.replace("/Login");
     }
    },
    goShoppingCart() {
      this.$router.push("/ShoppingCar");
    }
    ,
    shouCang() {
      if (this.icon == "star") {
        this.icon = "star-o"  
        this.text = "收藏"
      } else {
        this.icon = "star"
        this.text = "已收藏"
      }
    }
  }
}
</script>

<style scoped>
footer {
  position: fixed;
  bottom: 1px;
  left: 0px;
}
</style>